<template>
  <div class="listWapper">
    <customDetailsTopbar title="能源项目管理" flag @back="back" />
    <div class="listInner px-1">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="能源项目管理列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.projectsName }}
                <span>{{ item.projectsSchedule }}</span>
              </div>
              <ul class="des-list">
                <li v-for="des,ind in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">
                    <span v-if="des.value1">{{ item[des.value] }}/{{ item[des.value1] }}</span>
                    <span v-else>{{ item[des.value] }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
      <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <div class="customPopCheckbox">
              <div class="checkbox-title">项目名称</div>
              <el-input v-model="form.projectsName" placeholder="请输入项目名称" size="small" style="margin-bottom: 10px" />
            </div>
            <customPopCheckbox :list="selectOptionAll['节能诊断及评估-项目进度']" :check-value.sync="form.projectsSchedules" title="项目进度" />
            <customPopCheckbox :list="selectOptionAll['节能诊断-项目类型']" :check-value.sync="form.projectsTypes" title="项目类型" />
            <custom-timer type="year" title="所属年份" :is-interval="false" placeholder="请选择所属年份" :date-value="form.years" @update:dateValue="getTime" />
          </div>
          <div class="pop-bottom">
            <van-button type="default" @click="resetSuperSearch">清空</van-button>
            <van-button type="info" @click="handleSuperSearch">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { energyProjectsList } from '@/api/energySources'
export default {
  mixins: [commonList],
  data() {
    return {
      total: 0,
      pages: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        projectsName: '',
        projectsTypes: '',
        projectsSchedules: '',
        years: new Date().getFullYear() + '',
        companyIds: -1
      },
      desList: [
        { label: '企业名称', value: 'companyName', icon: '&#xe790;' },
        { label: '项目类型', value: 'projectsType', icon: '&#xe634;' },
        { label: '所属年份', value: 'years', icon: '&#xe8d5;' },
        { label: '项目进度', value: 'projectsSchedule', icon: '&#xe6d7;' }
        // { label: '预计节能量/实际节能量（吨标准煤/年）', value: 'expectedEnergySaving', value1: 'energySaving', icon: '&#xe61c;' },
        // { label: '预计节省费用/实际节省费用（万元/年）', value: 'expectedCostSavings', value1: 'costSavings', icon: '&#xe61c;' },
        // { label: '装机容量（MV）', value: 'installedCapacity', icon: '&#xe634;' }
      ],
      tableList: [],
      current: ''
    }
  },
  mounted() {
    const { current } = this.$route.query
    this.current = current
    this.energyProjectsList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    async energyProjectsList() {
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await energyProjectsList(this.form)
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.total = data.total
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/energyProjectManagementDetail',
        query: {
          current: this.current,
          projectsSchedule: item.projectsSchedule,
          id: item.id,
          projectsType: item.projectsType
        }
      })
    },
    getTime(val) {
      this.form.years = val
    },
    handleSearch(val) {
      this.form.companyName = val
      this.form.pageNum = 1
      this.tableList = []
      this.energyProjectsList()
    },
    handlePages(val) {
      this.form.pageNum = val
      this.energyProjectsList()
    },
    resetSuperSearch() {
      this.form.projectsTypes = ''
      this.form.years = ''
      this.form.projectsName = ''
      this.form.projectsSchedules = ''
      this.form.pageNum = 1
      // 重置输入框查询
      this.$refs.customSearch.restore()
      // this.tableList = []
      // this.superSearch = false
      // this.energyProjectsList()
    },
    handleSuperSearch() {
      this.form.pageNum = 1
      this.tableList = []
      this.superSearch = false
      this.energyProjectsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
